<template>
	<view>
		<uv-tabs :list="tabs" @change="changeTabs" :scrollable="false"></uv-tabs>
		<view class="needlist">
			<fy-need-item v-for="item in list" :key="item.id" :needInfo="item">
				<template v-slot:edit>
					<view class="mine-need_buttons">
						<view class="button-top" @click="showTopPkg(item)">
							<uv-count-down v-if="item.cut>0" :time="item.cut"></uv-count-down>
							<block v-else><image src="../../static/pyq01.png"></image>置顶</block>
						</view>
						<view class="button-other" @click="editneed(item)">
							<image src="../../static/pyq05.png"></image><text>修改</text>
						</view>
						<view v-if="queryForm.iscancel==0" class="button-other" @click="cancelNeed(item)">
							<image src="../../static/pyq07.png"></image><text>取消求购</text>
						</view>
						<view v-else class="button-other" @click="confirmNeed(item)">
							<image src="../../static/pyq08.png"></image><text>继续求购</text>
						</view>
			
					</view>
				</template>
			</fy-need-item>
		</view>
		

		<uv-load-more :status="status" @loadmore="loadMore" /> <uv-action-sheet ref="ref_action" cancelText="取消"
			:actions="topPackage" round="10" title="选择置顶" description='主页+搜索车友置顶优先显示,大幅提升车源曝光,并获得"置顶"标签,置顶剩余时长越长越靠前'
			@select="handleTop"></uv-action-sheet>

		<view class="need-to-pub">
			<view class="need-to-pub_content">
				<uv-button text="发布求购" type="primary"  shape="circle" @click="toNeed"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserNeedBuyInfo, cancelNeedBuyInfo, buyTop } from '@/utils/http.js'
	import { timespantoYMD } from '@/common/tools.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				tabs: [{ name: '求购中' }, { name: '已取消' }],
				list: [],
				total: 0,
				queryForm: {
					start: 0,
					length: 10,
					iscancel: 0
				},
				status: 'loadmore',
				wxcode: '',
				selectNeed: {}
			}
		},
		onLoad() {
			this.fetchData()
		},
		computed: {
			...mapState({ topPackage: state => state.syspackage.topPackage })
		},
		methods: {
			async handleTop(e) {
				let that = this
				var parm = { type: 'buy', id: this.selectNeed.id, topid: e.id, code: this.wxcode }
				const { data, code } = await buyTop(parm)
				const { appId, nonceStr, packageVal, paySign, signType, timestamp } = data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(timestamp),
					nonceStr: nonceStr,
					package: packageVal,
					signType: signType,
					paySign: paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
						})
						that.fetchData()
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'fail'
						})
					}
				})
			},
			showTopPkg(item) {
				this.selectNeed = item
				let that = this
				uni.login({
					success(res) {
						console.log(res)
						const { code } = res

						console.log(code)
						that.wxcode = code
					}
				})
				this.$refs.ref_action.open()
			},
			toNeed() {
				uni.navigateTo({
					url: '/pages/needbuy/index'
				})
			},
			changeTabs(e) {
				this.queryForm.iscancel = e.index
				this.fetchData()
			},
			editneed(e) {
				uni.navigateTo({
					url: '/pages/needbuy/index',
					success: function(res) {
						res.eventChannel.emit('need_edit', { data: e })

					}
				})
			},
			cancelNeed(e) {
				var parm = { id: e.id, iscancel: 1 }
				cancelNeedBuyInfo(parm).then(res => {
					this.fetchData()
				})
			},
			confirmNeed(e) {
				var parm = { id: e.id, iscancel: 0 }
				cancelNeedBuyInfo(parm).then(res => {
					this.fetchData()
				})
			},
			fetchData() {
				getUserNeedBuyInfo(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						var timespan = new Date()
						arr.cut = arr.topendtime ? arr.topendtime - timespan : 0
						arr.time = timespantoYMD(arr.createtime)
					})
					this.list = rows
					this.total = total
				})
			}

		}
	}
</script>
<style lang="scss">
	.needlist .fyneeditem{
		background: #fff;
		margin: 0 20upx;
		border-radius: 10upx;
		
	}
	.needlist .fyneeditem .need-list-box{
		margin: 0;
	}
	.mine-need_buttons {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		padding: 0 20upx 20upx 20upx;

		.button-top {
			border: #ff3600 solid 1upx;
			border-radius: 30upx;
			text-align: center;
			padding: 4upx 20upx;
			margin-left: 20upx;
			color:#ff3600;
			font-size: 24upx;
			image{
				width: 36upx;
				height: 36upx;
				vertical-align: middle;
				margin: -6upx 6upx 0 0;
			}
		}

		.button-other {
			border: #999 solid 1upx;
			border-radius: 130upx;
			text-align: center;
			padding: 4upx 20upx;
			margin-left: 20upx;
			color:#888;
			font-size: 24upx;
			image{
				width: 36upx;
				height: 36upx;
				vertical-align: middle;
				margin: -6upx 6upx 0 0;
			}
		}

	}


	.need-to-pub {
		width: 100%;
		height: 70px;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		text-align: center;
		flex-direction: row;
		justify-content: center;

		&_content {
			padding: 10px;
		}




	}
	.uv-action-sheet__item-wrap__item__name{
		font-size: 13px !important;
	}
</style>